import { useRef, useState } from "react";
import { PageContainer, FooterToolbar } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, update, add, remove } from "@/api/student";
import { genderOptions, studentStatusOptions } from "@/const";
import {
  ProFormRadio,
  ProFormText,
  ProFormDigit,
  ProFormTextArea,
} from "@ant-design/pro-form";
import { Button, Row, Col, Tag, Table, Statistic, Descriptions } from "antd";
import { history } from "umi";

export default () => {
  const actionRef = useRef();
  const [totalAmounts, setTotalAmounts] = useState(0);

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "性别",
      dataIndex: "gender",
      valueType: "select",
      fieldProps: {
        options: genderOptions,
      },
      search: false,
    },
    {
      title: "手机号",
      dataIndex: "mobile",
      width: 150,
    },
    {
      title: "年级",
      dataIndex: "grade",
    },
    {
      title: "学校",
      dataIndex: "school",
    },
    {
      title: "课时（含赠送）",
      dataIndex: "classHour",
      width: 150,
      search: false,
      sorter: (a, b) => a.classHour - b.classHour,
    },
    {
      title: "状态",
      dataIndex: "status",
      valueType: "select",
      fieldProps: {
        options: studentStatusOptions,
      },
      render: (_, record) => {
        const doms = {
          1: <Tag color="#87d068">在读</Tag>,
          2: <Tag color="red">停课</Tag>,
          3: <Tag color="#f50">休学</Tag>,
        };
        return doms[record.status];
      },
    },
  ];
  const renderFormItem = ({ type, formRef }) => {
    return (
      <>
        <Row gutter={20}>
          <Col span={12}>
            <ProFormText
              width="lg"
              label="姓名"
              name="name"
              rules={[
                { required: true, message: "请输入姓名" },
                {
                  max: 20,
                  message: "最长为20位",
                },
              ]}
            />
          </Col>
          <Col span={12}>
            <ProFormText
              width="lg"
              label="手机号码"
              name="mobile"
              tooltip="手机号很重要，请要求家长务必提供正确的手机号"
              placeholder="请输入手机号码"
              rules={[
                {
                  required: true,
                  message: "请输入手机号码",
                },
                {
                  pattern:
                    /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
                  message: "手机号码格式错误",
                },
              ]}
            />
          </Col>
        </Row>

        <Row gutter={20}>
          <Col span={12}>
            <ProFormText
              width="lg"
              label="年级"
              name="grade"
              rules={[
                { required: true, message: "请输入年级" },
                {
                  max: 20,
                  message: "最长为20位",
                },
              ]}
            />
          </Col>
          <Col span={12}>
            <ProFormRadio.Group
              width="lg"
              label="性别"
              name="gender"
              options={genderOptions}
              rules={[{ required: true, message: "请选择性别" }]}
            />
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <ProFormDigit
              width="lg"
              label="课时"
              name="classHour"
              placeholder="请输入课时"
              min={-200}
              max={200}
              fieldProps={{
                precision: 1,
              }}
              rules={[{ required: true, message: "请输入课时" }]}
            />
          </Col>
          <Col span={12}>
            <ProFormDigit
              width="lg"
              label="实际收费"
              name="amountMoney"
              placeholder="请输入实际收费"
              rules={[{ required: true, message: "请输入实际收费" }]}
            />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <ProFormText
              width="lg"
              label="学校"
              name="school"
              rules={[
                {
                  max: 20,
                  message: "最长为20位",
                },
              ]}
            />
          </Col>
          <Col span={12}>
            <ProFormRadio.Group
              width="lg"
              label="状态"
              name="status"
              options={studentStatusOptions}
              rules={[{ required: true, message: "请选择状态" }]}
            />
          </Col>
        </Row>
        <ProFormTextArea
          width="lg"
          fieldProps={{
            rows: 5,
          }}
          name="remark"
          label="备注"
          placeholder="请输入备注"
        />
      </>
    );
  };
  return (
    <PageContainer>
      <FooterToolbar style={{ paddingTop: 16 }}>
        <Descriptions
          column={4}
          labelStyle={{
            alignItems: "center",
          }}
        >
          <Descriptions.Item label="剩余课时">
            <Statistic value={totalAmounts} valueStyle={{ color: "#1890ff" }} />
          </Descriptions.Item>
        </Descriptions>
      </FooterToolbar>
      {useCommonTable({
        syncToUrl: true,
        search: {
          defaultCollapsed: false,
        },
        actionRef,
        title: "学生",
        initialValues: {
          status: 1,
          gender: 1,
        },
        renderFormItem,
        columns,
        modalWidth: "50%",
        fetchList: async (params) => {
          const res = await fetchList(params);
          const totalAmounts = res.data.reduce((a, b) => {
            return a + b.classHour;
          }, 0);
          setTotalAmounts(totalAmounts);
          return res;
        },
        add,
        update,
        remove,
        actionColumnWidth: 300,
        showCheckbox: false,
        insertPosition: 3,
        renderOtherAction: (_, record, actionRef) => {
          return (
            <>
              <Button
                type="primary"
                onClick={() => {
                  history.push(
                    `/student/studentClassRecord?studentId=${record._id}`
                  );
                }}
              >
                上课记录
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  history.push(`/student/renew?studentId=${record._id}`);
                }}
              >
                续费
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  history.push(
                    `/student/lessonDelivery?studentId=${record._id}`
                  );
                }}
              >
                送课时
              </Button>
            </>
          );
        },
      })}
    </PageContainer>
  );
};
